<template>
    <div class="home">
        <div class="left">
            <div class="logo">
                网站管理系统
            </div>
            <div class="nav">
                <div v-for="(item,index) in nav" :key="index" class="navitem">
                    <div class="tit" @click="GetGlobalNav(item,index)">
                        <span :class="item.icon"></span>
                        <p>{{ item.title }}</p>
                        <i v-if="item.children" :class="currentIndex == index ?' rotateActive' :'' "
                           class="el-icon-arrow-up"></i>
                    </div>

                    <div v-show="currentIndex==index" class="children">
                        <div v-for="(items,indexs) in item.children" :key="indexs" class="navitemChild">
                            <div :class="currenChildrentIndex==items.id ? 'titsActive' : ''" class="tits"
                                 @click="GetChildrenNav(items,indexs)">

                                <span :class="items.icon"></span>
                                <p>{{ items.title }}</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Hometop">
            <div class="top-menu">
                <p> 首页 <span style="color: #999"> {{ menuName }}</span></p>
                <div class="userinfo">
                    <el-popover
                        v-model="visible"
                        placement="top"
                        width="60">
                        <div class="Fit-menu">
                            <div class="Fit-menuItem">个人资料</div>
                            <div class="Fit-menuItem" @click="GetLoginOut()">退出登录</div>
                        </div>
                        <div slot="reference" class="avatarUrl">
                            <el-avatar :size="40" shape="square"
                                       src="http://vue.ruoyi.vip/static/img/profile.473f5971.jpg"></el-avatar>
                            <span class="el-icon-caret-bottom"></span>
                        </div>

                    </el-popover>
                </div>
            </div>
            <div class="bottom-menu">
                <div v-for="(item,index) in menulist" :key="index" class="tags">
                    <el-tag
                        :disable-transitions="false"
                        :type="currenChildrentIndex==item.id?'success' :'info'"
                        closable
                        size="medium "
                        @close="handleClose(item)">
                        {{ item.title }}
                    </el-tag>
                </div>

            </div>
        </div>
<!--        <div class="right">-->
<!--            <router-view></router-view>-->
<!--        </div>-->
    </div>
</template>

<script>
export default {
    name: "HomeIndex",
    data() {
        return {
            visible: false,
            isCollapse: false,
            menuName: "",
            currentIndex: 1,
            currenChildrentIndex: -1,
            menulist: [],
            nav: []
        }
    },
    mounted() {
        this.initPageData()
    },
    computed: {

    },
    methods: {
        // 退出登录
        GetLoginOut() {
            this.$Msg.openConfirm('确定要退出吗？', 'warning', () => {
                this.$router.push('login')
                this.$Msg.message('退出成功')

            }, () => {
                this.$Msg.message('退出失败', 'error')
            })
            // Msg.message('退出失败')
        },

        handleClose(item) {
            let index = this.menulist.findIndex(i => i.id == item.id)
            this.menulist.splice(index, 1)
        },
        // 二级目录
        GetChildrenNav(item, indexs) {

            let pathname = this.$route.name;

            if (pathname != item.path) {
                this.$router.push('/' + item.path)
            }

            let index = this.menulist.findIndex(i => i.id == item.id)

            if (index == -1) {
                this.menulist.push(item)
            }

            this.menuName = ''

            if (!item.children) {
                this.menuName = ' / ' + item.catname
            }

            if (this.currenChildrentIndex == item.id) {
                this.currenChildrentIndex = -1
            } else {
                this.currenChildrentIndex = item.id
            }


        },
        // 一级目录
        GetGlobalNav(item, index) {

            if (this.currentIndex == index) {
                this.currentIndex = -1
            } else {
                this.currentIndex = index
            }

        },

        // 初始化数据
        initPageData() {
            let data = {
                status: 1,
                page: 1,
                num: 999999,
                title: ''
            }

            this.$http.HttpPost("v1/GetMenuList", data).then((res) => {

                if (res.code == 0) {

                    this.nav = res.data

                } else {
                    this.$Msg.message(res.msg)
                }


            })
        },
    }
}
</script>

<style scoped>
.el-menu {
    border-right: 0 solid #ffffff;
}

.home {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 100%;


}

.right {
    position: absolute;
    left: 14%;
    width: 85%;
    height: 100%;
    top: 100px;
    overflow: hidden;

}

.left {
    width: 13%;
    height: 100%;
    background-color: #304156;
    position: fixed;

    /*overflow: hidden;*/
}

.logo {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
}

.nav {
    width: 100%;
    /*padding: 0 5%;*/
    overflow: hidden;
    color: rgb(191, 203, 217);
}

.navitem {
    position: relative;


}

.navitem .tit {
    width: 90%;
    padding: 0 5%;
    display: flex;
    align-items: center;
    height: 45px;
    cursor: pointer;
    position: relative;
    transition: 0.5s ease;
}

.navitem .tit span, .navitem .navitemChild .tits span {
    margin-right: 15px;
}

.navitem .tit i, .navitem .navitemChild .tits i {
    position: absolute;
    right: 15px;
    transition: 0.1s ease;
}

.rotateActive {
    transform: rotate(180deg);
}

.navitem .tit:hover {
    background-color: #2d3d51;
    color: #ffffff;
}


.navitem .navitemChild {
    background-color: #1f2d3d;
}

.navitem .navitemChild .tits {
    width: 85%;
    padding: 0 0%;
    display: flex;
    align-items: center;
    height: 45px;
    cursor: pointer;
    position: relative;
    transition: 0.5s ease;
    padding-left: 15%;
}

.navitem .navitemChild .tits:hover {
    background-color: #001528;
    color: #ffffff;
}


.titsActive {
    background-color: #001528;
    color: #ffffff;
}


.Hometop {
    width: 87%;
    height: 90px;
    position: fixed;
    top: 0;
    left: 13%;
    background: #fff;
    z-index: 5;
    border-bottom: 1px solid #d8dce5;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04)
}

.Hometop .top-menu {
    display: flex;
    height: 50px;
    padding: 0 1%;

    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d8dce5;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04)
}

.Hometop .top-menu .avatarUrl {
    width: 60px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: end;
    /*flex-direction: column-reverse;*/
}

::v-deep .el-popover {
    min-width: 60px !important;
    width: 60px;
    right: 0 !important;

}

.Hometop .top-menu .Fit-menu {
}

.Fit-menuItem {
    margin: 0;
    margin-bottom: 5px;
    cursor: pointer;
    transition: 0.3s ease;
}

.Fit-menuItem:hover {
    color: #409eff;
}

.Fit-menuItem:last-child {
    margin-bottom: 0px;
}

.Hometop .bottom-menu {
    display: flex;
    height: 40px;
    padding: 0 1%;
    display: none;
    align-items: center;

}

.Hometop .bottom-menu .tags {
    margin-right: 10px;
    cursor: pointer;
}

</style>
